<template>
    <InputNumber
        v-model="amount"
        :min="min"
        :max="max"
        :precision="precision"
        :readonly="readonly"
        :disabled="disabled"
        :formatter="value => `${currency} ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
        :parser="value => value.replace(`${currency}`, '')"
        :active-change="false"
        :placeholder="placeholder"
        @on-change="handleChange"
        style="width: 100%;"
    >
    </InputNumber>   
</template>
<script>
export default {
    name:'inputAmount',
    props:{
        value:{
            type:Number,
            default: 0
        }, 
        min:{
            type:Number,
            default: 0.01
        },
        max:{
            type:Number,
            default: 99999999
        },
        step:{
            type:Number,
            default: 1
        },
        precision:{
            type:Number,
            default: 2
        },
        readonly: {
        	type: Boolean,
        	default: false
        },
        disabled: {
        	type: Boolean,
        	default: false
        },
        placeholder: {
        	type: String,
        	default: ''
        }
    },
    computed: {
        currency () {
            return this.$store.state.config.currency;
        }
    },
    data() {
    	return {
    		amount: 0
    	}
    },
    mounted() {
    	this.amount = Number(this.value);
    },
    methods:{
        handleChange(value){
            this.$emit('input', value);
            this.$emit('on-change', value);
        }      
    },
    watch: {
    	value(val) {
    		this.amount = Number(val);
    	}
    }
}
</script>


